<template>
  <div>
    <el-card>
      <div class="card">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input @clear="search"  clearable v-model="vipList.cluster" placeholder="请输入用户ID/昵称" @keydown.native="downCluster()" @keyup.native="upCluster($event)"></el-input>
          </el-col>
	  <el-col :span="4">
	    <el-input type="date"  @clear="search"  clearable v-model="vipList.registertimeStart" placeholder="请输入开始时间"></el-input>
	  </el-col>
	  <el-col :span="4">
	    <el-input type="date"  @clear="search"  clearable v-model="vipList.registertimeStop" placeholder="请输入结束时间"></el-input>
	  </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="search">搜索</el-button>
	   <!-- <el-button  v-show='isShow' v-model="hdnCluster"></el-button> -->
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 会员列表 -->
    <el-card>
      <div>用户列表</div>
      <el-divider></el-divider>
      <!-- 列表 -->
      <el-table @sort-change='sortid' :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :data="utilizers" style="width: 100%" border>
        <el-table-column prop="id" label="用户ID" width="100"></el-table-column>
        <el-table-column  sortable="custom" prop="registertime" label="注册时间" width="180"></el-table-column>
        <el-table-column prop="nickname" label="用户昵称" width="160"></el-table-column>
        <el-table-column prop="community.town.name" label="所属街道" width="120"></el-table-column>
        <el-table-column prop="community.name" label="所属社区" width="120"></el-table-column>
        <el-table-column  sortable="custom" prop="score" label="当前积分" width="100"></el-table-column>
        <el-table-column  sortable="custom" prop="accumulatedScore" label="累计获得积分" width="100"></el-table-column>
	<el-table-column  sortable="custom" prop="continuousChallengeDays" label="连续挑战天数" width="100"></el-table-column>
	<el-table-column  sortable="custom" prop="bestPerformance" label="最佳成绩" width="100"></el-table-column>
	<el-table-column label="操作" width="80" v-if="roleId !== 2 && roleId !== 3 ">
          <template slot-scope="scope">
            <el-tag class="look" @click="look(scope.row.id)">核销</el-tag>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <br /><br />
      <p style="">共计{{sum}}条记录</p>
      <paging-query style="margin: -55px 0px 0px 300px;" :pages="pages"  :total="sum" @currentPage="currentPage"></paging-query>
      <!-- 弹窗 -->
      <el-dialog title="核销" :visible.sync="dialogVisible" width="50%">
        <!-- 表格记录 -->
	<div style="margin-top: 10px;">
	    <el-select v-model="select" slot="prepend" placeholder="请选择">
	      <el-option label="扣分" value="1"></el-option>
	      <el-option label="增加" value="2"></el-option>
	    </el-select>
	</div>
	<el-col :span="15">
	 <el-input v-model="ruleForm.point" placeholder="请输入整数"></el-input>
	</el-col>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog(ruleForm.id,ruleForm.point)">确 定</el-button>
      </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getUtilizerSum, getUtilizers ,chargeoff} from "../api/index";
import PagingQuery from "../components/pagination";
export default {
  components: {
    PagingQuery
  },
  data() {
    return {
      pages:{
        page:1,
        count:7,
      },
      sum:0,
      total: 0,
      // 列表数据
      vipList: {
        cluster: "",
        registertimeStart: "",
        registertimeStop: "",
        sortingKey: "",
	sortingDirection:false
      },
      ruleForm: {
        id:"",
	point:""
      },
      utilizers: [],
      dialogVisible: false,
      input3: '',
      select: '1',
      value1:'',
      // 角色id
      roleId:0,
      //变量
      downtime:0,
      uptime:0,
      hdnCluster:"",
      isShow:""

    };
  },
  created() {
    this.getOrdertotal();
    // 获取列表
    this.getCommodity();
    this.roleId =JSON.parse( window.sessionStorage.getItem("user")).role.id;

  },
  methods: {
    //排序
    async sortid(colum,prop,order){
      //column：当前列;  prop：当前列需要排序的数据; order：排序的规则（升序、降序和默认[默认就是没排序]）
      //上升ascending==false;   下降descending==true;   没有null;
      console.log(colum.prop)
      if(colum.prop=="registertime"){
        //注册时间
        this.vipList.sortingKey="utilizerRegistertime";
        if(colum.order=="ascending"){
          this.vipList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.vipList.sortingDirection=true
          }else{
            this.vipList.sortingKey=""
            this.vipList.sortingDirection=false
          }
      }else if(colum.prop=="score"){
        //当前积分
        this.vipList.sortingKey="utilizerScore";
        if(colum.order=="ascending"){
          this.vipList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.vipList.sortingDirection=true
          }else{
            this.vipList.sortingKey=""
            this.vipList.sortingDirection=false
          }
      }else if(colum.prop=="accumulatedScore"){
        //累计获得积分
        this.vipList.sortingKey="utilizerAccumulatedScore";
        if(colum.order=="ascending"){
          this.vipList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.vipList.sortingDirection=true
          }else{
            this.vipList.sortingKey=""
            this.vipList.sortingDirection=false
          }
      }else if(colum.prop=="continuousChallengeDays"){
        //连续挑战天数
        this.vipList.sortingKey="utilizerContinuousChallengeDays";
        if(colum.order=="ascending"){
          this.vipList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.vipList.sortingDirection=true
          }else{
            this.vipList.sortingKey=""
            this.vipList.sortingDirection=false
          }
      }else if(colum.prop=="bestPerformance"){
        //最佳成绩
        this.vipList.sortingKey="utilizerBestPerformance";
        if(colum.order=="ascending"){
          this.vipList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.vipList.sortingDirection=true
          }else{
            this.vipList.sortingKey=""
            this.vipList.sortingDirection=false
          }
      }
      this.getCommodity()
    },
    getToday () {
    	return new Date ();
    },
    getMillisecond(){
	return this.getToday ().getTime ();
    },
    downCluster(){
	this.downtime = this.getMillisecond ();
      },
    upCluster (event){
      this.uptime = this.getMillisecond ();
	if (event.keyCode != 13 && this.uptime - this.downtime < 30) {
		this.queryUtilizers();
	}
      },
    // 获取总数
    async getOrdertotal() {
      const res = await getUtilizerSum({...this.vipList});
      this.sum = res.data.sum;
    },
    // 获取列表
    async getCommodity() {
      const res = await getUtilizers({ ...this.vipList, ...this.pages });
      if(res.code !==200)return this.$message.error("获取会员列表失败")
      this.utilizers = res.data.utilizers;
    },
    // 分页
    currentPage(newPage) {
      this.pages.page=newPage
      this.getCommodity()
    },
    // 搜索
    search() {
      this.getCommodity();
      this.getOrdertotal();
    },
    queryUtilizers () {
    	this.getCommodity();
    	this.getOrdertotal();
    },
    // 清除
    clear() {
      this.getCommodity();
    },
    async dialog(id,point) {
      for(var i=0;i< this.utilizers.length;i++){
	if(this.utilizers[i].id==this.ruleForm.id){
	     if(this.utilizers[i].score<this.ruleForm.point && this.select=='1'){
		    this.$message.error("扣分大于当前积分,核销失败")
		    this.select=""
		    this.ruleForm.point=""
		    this.dialogVisible = false;
	     }else{
		if(this.select=='1'){
		   this.ruleForm.point='-'+this.ruleForm.point;
		 };
		 const res = await chargeoff({ ...this.ruleForm });
		if(res.code !==200)return this.$message.error("获取核销记录失败")
		this.$message.success("核销成功")
		this.getCommodity();
		this.select='1'
		this.ruleForm.point=""
		this.dialogVisible = false;
	     }
	}
      }
    },
    // 核销
    async look(id) {
     this.dialogVisible = true;
     this.ruleForm.id=id
    }
  }
};
</script>

<style lang="less">
.card {
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.look {
  cursor: pointer;
}
.tables .el-table__body-wrapper{
  height: 240px !important;
  overflow-y:scroll ;
}
</style>
